<template>
	<view class="login">
		<Header title="忘记密码" color="#fff"></Header>

		<view class="main">
			<view class="in">
				<view class="piece">
					<text>账号:</text>
					<input type="number" maxlength="11" v-model="phone" placeholder="请输入账号" placeholder-style="color:#A1A1A1;" />
				</view>
				<view class="piece">
						<text>验证码</text>
						<input type="tel" v-model="code" placeholder="请输入验证码" />
					<view class="time_btn" @tap="getcode">{{ yanzhengma }}</view>
				</view>
				<view class="piece">
					<text>登录密码:</text>
					<input @input="onKeyVinInput(password)" v-model="password"  type="password" placeholder="请输入密码" placeholder-style="color:#A1A1A1;" />
				</view>
				<view class="piece">
					<text>确认密码:</text>
					<input @input="onKeyVinInput2(surepassword)" v-model="repwd"  type="password" placeholder="请确认密码" placeholder-style="color:#A1A1A1;" />
				</view>
				<div class="piece2 cen human-check" id="human-check"></div>

				<!-- <view class="reg">
					<text @click="$p.back()">返回登录</text>
				</view> -->
				
				<view class="login_bottom">
					<view class="button btn " @click="resetpwd">
						确认
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	var _this, js;
	var sessionId = "";
	var sig = 0;
	var token = "";
	var yp_check = false;
	export default {
		data() {
			return {
				second: 0, //倒计时
				showPassword: false,
				showPassword2: false,
				checked: false,
				phone: "",
				code: "",
				invite: "",
				password: "",
				repwd:'',
				surepassword:'',
			};
		},
		computed: {
			yanzhengma() {
				if (this.second == 0) {
					return "获取";
				} else {
					if (this.second < 10) {
						return "重新获取0" + this.second;
					} else {
						return "重新获取" + this.second;
					}
				}
			},
		},

		deactivated() {
			if (document.querySelector("#human-check")) {
				document.querySelector("#human-check").innerHTML = "";
			}
			if (window.ic) window.ic = null;
		},
		activated() {
			document.querySelector("#human-check").innerHTML = "";
			if (window.ic) window.ic = null;
			this.ypInit();
		},
		created() {
			setTimeout(() => {
				this.ypInit()
			}, 400);
		},

		methods: {
			register() {
				uni.navigateTo({
					url: './register'
				});
			},
			back() {
				history.back()
			},


			ypInit() {
			if (window.ic && yp_check) {
				yp_check = 0;
				return ic.reset()
			}
			if (window.ic) {
				return yp_check = 0
			}
			// 实例化ic对象
			AWSC.use("ic", function(state, module) {
				// 初始化
				window.ic = module.init({
					// 应用类型标识。它和使用场景标识（scene字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
					appkey: "FFFF0N0000000000A00B",
					// 使用场景标识。它和应用类型标识（appkey字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
					scene: "ic_register_h5",
					// 声明智能验证需要渲染的目标元素ID。
					renderTo: 'human-check',
					// 验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
					success: function(data) {
						// console.log(data);
						sessionId = data.sessionId
						sig = data.sig
						token = data.token
						yp_check = true
					},
					// 验证失败时触发该回调参数
					fail: function(failCode) {
						// console.log(failCode)
					},
					// 验证码加载异常时触发该回调参数
					error: function(errorCode) {
						// console.log(errorCode)
					}
				});
			})
		},

			// 监听密码输入只允许数字和字母
			onKeyVinInput(event) {
				var value = event
				if (!value || value == " ") {
					return ''
				}
				// 数字和字母
				const rule = /[\W]/g
				this.$nextTick(() => {
					this.password = value.replace(rule, '')
				})
			},
			onKeyVinInput2(event) {
				var value = event
				if (!value || value == " ") {
					return ''
				}
				// 数字和字母
				const rule = /[\W]/g
				this.$nextTick(() => {
					this.surepassword = value.replace(rule, '')
				})
			},

			// 获取验证码
			// 获取验证码
			async getcode() {
				// this.$u.toast('请联系客服处理！')
				// if (!this.mve) {
				// 	this.$u.toast("请进行验证");
				// } else 

				if (this.phone == "" || this.phone == null) {
					this.$u.toast("请先输入账号");
				} else  if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					this.$u.toast("手机号有误");
				} else  if(!yp_check){
					this.$u.toast("请点击下方按钮进行验证");
				}else {
					if (this.second > 0) {
						return;
					}
					this.second = 60;
					//请求业务
					let res = await this.$http.index.sendSms({
						mobile: this.phone,
							type: 'retrievePwd',
							sessionId: sessionId,
							sig: sig,
							token: token
					})
					if (res.code == 0) {
						this.$u.toast(res.msg);
						js = setInterval(() => {
							this.second--
							if (this.second == 0) {
								clearInterval(js);
							}
						}, 1000);
					} else {
						this.second = 0;
						this.$u.toast(res.msg);
						this.ypInit()
					}
				}
			},

			// 注册事件
			// 重置密码
			async resetpwd() {
				// if (!this.mve) {
				// 	this.$u.toast("请进行验证");
				// } else 

				// this.$u.toast('请联系客服处理！')
				// return

				if (this.phone == '' || this.phone == null) {
					this.$u.toast("手机号不能为空");
				} else
				if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return false;
				} else if(!yp_check){
					this.$u.toast("请点击下方按钮进行验证");
				}else if (this.code == '' || this.code == null) {
					this.$u.toast("验证码不能为空");
				} else if (this.password == '' || this.password == null) {
					this.$u.toast("密码不能为空");
				} else if (this.repwd == '' || this.repwd == null) {
					this.$u.toast("请确认密码");
				} else {
					let res = await this.$http.index.resetPwd({
						mobile: this.phone,
						sms_code: this.code,
						pwd: this.password,
						repwd: this.repwd,
						sessionId: sessionId,
						sig: sig,
						token: token
					})
					// console.log(res);
					if (res.code == 1) {
						this.$u.toast(res.msg)
						setTimeout(() => {
							uni.reLaunch({
								 url: '/pages/login/login'
							})
						}, 1500);
					} else {
						this.ypInit()
						this.$u.toast(res.msg)
					}
				}
			}
		}
	}
</script>

<style lang="less">
	.login {
		background: url('http://img.cpgm.cc/panda/static/login/bg.jpg');
		background-size: 100% 100%;
		min-height: 100vh;
	}

	.main {
		padding: 20px 12px 12px;
	}

	.topbox {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 80px;
		}

		text:nth-child(2) {
			color: #000000;
			font-size: 16px;
			margin-top: 10px;
			font-weight: 600;
		}

		text:nth-child(3) {
			color: #4938AE;
			font-size: 13px;
			margin-top: 10px;
			font-weight: 600;
		}
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40px;

		text {
			position: relative;
			color: #131314;
			font-size: 16px;
			margin: 0 10px;
			font-weight: 600;
			z-index: 99;
		}

		text::before {
			content: '';
			position: absolute;
			left: 15%;
			top: 0;
			width: 30px;
			height: 100%;
			border-radius: 20%;
			background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
			z-index: -1;
		}

		image {
			width: 12px;
		}
	}



	.piece {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 15px;
		margin: 10px 0;
		background: rgba(242,242,242,0.95);
		border-radius: 7px;
	}

	.time_btn {
		position: absolute;
		right: 15px;
		width: 91px;
		height: 36px;
		background: linear-gradient(90deg, #77FFFF 0%, #248EF6 100%);
		box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,0.3);
		border-radius: 4px;
		border: 1px solid #000000;
		color: #000;
		font-size: 14px;
		line-height: 36px;
		text-align: center;
		font-weight: 600;
	}

	.piece2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 10px;
		margin: 10px 0;
		background: rgba(242,242,242,0.95);
		border-radius: 7px;
	}

	.piece text {
		width: 20%;
		font-size: 14px;
		font-weight: 600;
	}

	.piece image {
		width: 20px;
		height: 20px;
	}

	.piece input {
		width: 80%;
		font-size: 14px;
		color: #131314;
	}

	.cen {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-content: center;
		justify-content: center;
		color: #fff;
	}


	.reg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 5px;
		font-size: 12px;
	}

	.reg text {
		color: #fff;
		font-weight: 600;
	}

	.btn {
		font-size: 14px;
		width: 90%;
		margin: 0 auto;
		margin-top: 4vh;
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #000;
		background: linear-gradient(90deg, #77FFFF 0%, #248EF6 100%);
		box-shadow: inset 0px 4px 0px 0px rgba(0,0,0,0.5);
		border-radius: 7px;
		font-weight: 600;
		font-size: 18px;
	}

	.checkgroup {
		width: 100%;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		margin-top: 15px;
	}

	.checkbox {
		margin: 0 auto;
	}
	.explain {
		font-size: 12px;
		color: #343434;
		font-weight: 600;
	}

	.yellow {
		font-size: 12px;
		color: #fff;
		font-weight: 600;
	}


	::v-deep #SM_BTN_WRAPPER_1 {
		width: 100% !important;
	}

	::v-deep #SM_BTN_1 {
		width: 100% !important;
	}

	::v-deep #rectMask {
		width: 100% !important;
	}
	
/deep/ .u-checkbox__icon-wrap--checked {
	background:  linear-gradient(90deg, #77FFFF 0%, #248EF6 100%) !important; 
}

</style>